<template>
  <section class="search_container">
    <section class="left-container">
      <section
        v-for="(colItem, colIndex) in searchConfig"
        :key="colIndex"
        class="complex-container margin-b10"
      >
        <el-input
          v-if="colItem.type == 'input'"
          v-model.trim="colItem.value"
          :placeholder="colItem.placeholder"
          class="query"
          :style="{ width: colItem.width || '470px' }"
          clearable
        >
        </el-input>
        <template v-else>
            <div class="label" v-show="colIndex < 3 || showMore">
              {{ colItem.title }}
            </div>
            <div v-show="colIndex < 3 || showMore">
              <!-- 普通选择框 -->
              <el-select
                v-if="colItem.type == 'select'"
                v-model="colItem.value"
                :placeholder="colItem.placeholder"
                clearable
                :multiple="colItem.multiple"
              >
                <el-option
                  v-for="temp in colItem.options"
                  :key="temp.value"
                  :label="temp.label"
                  :value="temp.value"
                >
                </el-option>
              </el-select>
              <!-- 类型选择 -->
              <typeSelect
                v-if="colItem.type == 'typeSelect'"
                :extendsList="colItem.extendsList || []"
                v-model="colItem.value"
                :type="colItem.dictType"
                :multiple="!!colItem.multiple"
                :isAll="colItem.isAll"
                :allText="colItem.allText"
                :placeholderText="colItem.placeholder"
                class="select_type"
                clearable
              ></typeSelect>
              <!-- 远程选择 -->
              <el-select
                v-if="colItem.type == 'selectRemote'"
                class="select_remote"
                v-model="colItem.value"
                filterable
                clearable
                remote
                reserve-keyword
                :placeholder="colItem.placeholder || '请选择供应商名称'"
                :remote-method="remoteMethod"
                :loading="loading"
              >
                <el-option
                  v-for="tempm in colItem.remoteOptions"
                  :key="tempm"
                  :label="tempm"
                  :value="tempm"
                >
                </el-option>
              </el-select>
              <!-- 多级选择 -->
              <el-cascader
                v-if="colItem.type == 'cascader'"
                v-model="colItem.value"
                :placeholder="colItem.text || '请选择省市区'"
                :props="{ checkStrictly: true, multiple: colItem.multiple }"
                :options="colItem.options || addrList"
                clearable
                filterable
                collapse-tags
                class="cascader_type"
              >
              </el-cascader>
              <!-- 日期选择 -->
              <el-date-picker
                v-if="colItem.type == 'date'"
                v-model="colItem.value"
                :type="colItem.dateType || 'daterange'"
                :range-separator="colItem.rangeSeparator"
                :start-placeholder="colItem.startPlaceholder"
                :end-placeholder="colItem.endPlaceholder"
                :value-format="colItem.valueFormat"
                class="date-picker-container"
              >
              </el-date-picker>
            </div>
        </template>
      </section>
    </section>
    <section class="right-container margin-b10">
      <!-- 右侧的按钮以及条件 -->
      <section class="more-condition" v-if="searchConfig.length > 3" @click="showMore = !showMore">
        <div style="margin-right:6px;">
          {{ !showMore ? `更多搜索条件` : `收起更多` }}
        </div>
        <img :src="require(!showMore ? './img/down.svg' : './img/up.svg')" />
      </section>
      <section class="button-wrapper">
        <el-button class="search-button" style="" @click="handleSearch"
          ><i class="el-icon-search" style="margin-right: 15px"></i
          >查询</el-button
        >
      </section>
      <slot name="search-right-item"></slot>
    </section>
  </section>
</template>

<script>
import typeSelect from "../typeSelect";
export default {
  props: {
    searchConfig: {
      type: Array,
      define: () => [],
    },
    loading: {
      type: Boolean,
      define: false,
    },
  },
  data() {
    return {
      addrList: this.$store.state.addrList.addrList,
      showMore: false,
    };
  },

  components: {
    typeSelect,
  },

  methods: {
    handleSearch() {
      this.$emit("handleSearch");
    }
  },
};
</script>
<style lang="scss" scoped>
.search_container {
  position: relative;
  .margin-b10 {
    margin-bottom: 10px;
  }

  /deep/ .el-date-editor .el-range__close-icon {
    line-height: 26px;
  }
  /deep/ .el-range__icon {
    line-height: 27px;
  }
  /deep/ .el-range-separator {
    line-height: 26px;
  }
  @include flex_cz;
  justify-content: flex-start;
  .left-container {
    @include flexalign_cz;
    flex-wrap: wrap;

    .complex-container {
      @include flexalign_cz;
      margin-right: 30px;
    }
    .query {
      width: 470px;
      height: 33px;
      border-radius: 0px 2px 2px 0px;
    }
    .label {
      min-width: 90px;
      height: 31px;
      background: #f5f5f5;
      border-radius: 2px 0px 0px 2px;
      border: 1px solid #ececeb;
      font-size: 13px;
      font-weight: normal;
      color: #333333;
      @include flexcenter_cz;
      border-right: none;
    }
    /deep/ .el-input__inner {
      height: 33px;
    }

    .date-picker-container {
      width: 380px;
      /deep/ .el-input__inner {
        width: 100%;
      }
    }
  }
  .right-container {
    width: 260px;
    @include flex_cz;
    justify-content: space-between;
    flex-shrink: 0;
    .more-condition {
      @include flex_cz;
      padding-top: 7px;
      cursor: pointer;
      img {
        width: 10px;
        height: 10px;
        padding-top: 6px;
      }
    }
    .search-button {
      display: flex;
      align-items: center;
      width: 130px;
      height: 33px;
      padding-left: 30px;
      background: #ec6c00;
      border-radius: 2px;
      font-size: 13px;
      font-weight: normal;
      color: #ffffff;
    }
  }
}
</style>
